<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>热点趋势 - 抖音大数据观测平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 样式 -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            background: var(--bg-dark) url('../image/bj3.JPG') center/cover fixed;
        }
        
        /* 热点话题两栏布局样式 */
        .hotspot-container-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            width: 100%;
        }
        
        .topic-list-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .topic-detail-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .topic-detail-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            min-height: 400px;
        }
        
        .no-selection {
            text-align: center;
            color: #666;
            font-size: 18px;
        }
        
        /* 左侧话题列表项样式调整 */
        .hot-topic-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .hot-topic-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }
        
        .hot-topic-item.active {
            background: rgba(102, 126, 234, 0.2);
            border-left: 4px solid #667eea;
        }
        
        /* 小图片样式 */
        .topic-image-small {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            margin-right: 10px;
            object-fit: cover;
        }
        
        /* 右侧详情内容样式 */
        .detail-image {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .detail-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .detail-description {
            font-size: 16px;
            line-height: 1.6;
            color: #ccc;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .hotspot-container-wrapper {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <!-- 脚本：先加载ECharts核心和地图，再加载业务脚本 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/world.js"></script>
    <script src="js/timeDisplay.js" defer></script>
    <script src="js/hotspot.js" defer></script>
    <script src="js/animation.js"></script>

</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar">
    <div class="logo">
        <a href="index.html" class="home-link">🏠 抖音大数据观测平台</a>
    </div>
    <ul class="nav-menu">
        <li><a href="overview.html">实时概览</a></li>
        <li><a href="hotspot.html" class="active">热点趋势</a></li>
        <li><a href="user-data.html">用户数据</a></li>
    </ul>
    <div class="time-display" id="currentTime">00:00:00</div>
    <div id="fullscreenBtn" class="btn">全屏</div>
</nav>

<!-- 主容器 -->
<main class="main-container page-transition">
    <h1 class="page-title">热点趋势分析</h1>
    
    <!-- 热点概览指标 -->
    <section class="realtime-bar">
        <div class="realtime-item">
            <div class="label">今日热点总数</div>
            <div class="value"><span class="counter" data-target="128">0</span><span class="unit">个</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">最热话题热度</div>
            <div class="value"><span class="counter" data-target="987523">0</span><span class="unit">万</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">平均传播速度</div>
            <div class="value"><span class="counter" data-target="156">0</span><span class="unit">分钟</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">当前爆点</div>
            <div class="value" id="currentHotspot">元旦假期</div>
        </div>
    </section>

    <!-- 网格卡片 -->
    <section class="dashboard-grid">
        <!-- 实时热点词云 -->
        <div class="card map-container">
            <div class="card-header">
                <div class="card-title">实时热点词云</div>
                <div class="hotspot-controls">
                    <select id="timeRangeSelect" title="选择时间范围">
                        <option value="1h">最近1小时</option>
                        <option value="6h" selected>最近6小时</option>
                        <option value="24h">最近24小时</option>
                    </select>
                    <button class="btn" onclick="refreshHotspot()">刷新</button>
                </div>
            </div>
            <div class="hotspot-container" id="hotspotWords"></div>
        </div>

        <!-- 热点趋势图 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">热点趋势变化</div>
            </div>
            <div id="hotspotTrendChart" class="chart-container"></div>
        </div>

        <!-- 热点分类 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">热点分类分布</div>
            </div>
            <div id="hotspotCategoryChart" class="chart-container"></div>
        </div>

        <!-- 热点话题区域（两栏布局） -->
        <div class="hotspot-container-wrapper">
            <!-- 左侧热门话题列表 -->
            <div class="card topic-list-card">
                <div class="card-header">
                    <div class="card-title">热门话题TOP10</div>
                </div>
                <div class="hot-topics-list" id="hotTopicsList"></div>
            </div>
            
            <!-- 右侧话题详情展示 -->
            <div class="card topic-detail-card">
                <div class="card-header">
                    <div class="card-title">话题详情</div>
                </div>
                <div class="topic-detail-content" id="topicDetailContent">
                    <div class="no-selection">
                        <p>点击左侧话题查看详情</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<script>
    // 页面加载完成后，渲染话题列表并默认选中第一个话题
    document.addEventListener('DOMContentLoaded', function() {
        // 等待hotspot.js加载完成
        setTimeout(() => {
            if (typeof renderHotTopicsList === 'function') {
                renderHotTopicsList();
                // 默认选中第一个话题并显示详情
                setTimeout(() => {
                    const firstTopic = document.querySelector('.hot-topic-item');
                    if (firstTopic) {
                        firstTopic.click();
                    }
                }, 500);
            }
        }, 300);
    });
</script>
</body>
</html>